<template>
  <div style="padding: 20px 30px;">
    <basic v-if="getVisible('child')" />
    <add v-if="getVisible('add')" />
  </div>
</template>
<script>
import Basic from './basic.vue'
import Add from './add.vue'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Basic,
    // eslint-disable-next-line vue/no-unused-components
    Add
  },
  data () {
    return {
      type: ''
    }
  },
  computed: {
    getVisible () {
      return function (layout) {
        return this.type === layout
      }
    }
  },
  watch: {
    $route: {
      handler (to, form) {
        this.setQuery()
      },
      deep: true
    }
  },
  mounted () {
    this.setQuery()
  },
  methods: {
    setQuery () {
      const { type } = this.$route.query
      this.type = type || 'child'
    }
  }
}
</script>
